<template>
    <div>
        <div class="login-view">
            <div class="text-center mt-24 top-logo">
                <img class=" w-24 h-24 inline-block rounded-md" src="@/assets/logo.jpg">
            </div>
            <div class="text-center" v-show="!showType">
                <div class="text-lg mb-2">Welcome <!----></div>
                <div class="mb-4">Please login using your account to use. </div>
                <div>
                    <button @click="showType = 'accout'" class="mr-4 bg-base text-white outline-none">登 录</button>
                    <button @click="showType = 'register'" class="bg-base text-white">注 册</button>
                </div>
            </div>

            <accout @setType="setType" v-show="showType == 'accout'" />
            <register @setType="setType" v-show="showType == 'register'" />
            <resetPassword @setType="setType" v-show="showType == 'resetPassword'" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import accout from './accout.vue'
import register from './register.vue'
import resetPassword from './resetPassword.vue'
let showType = ref<string>('')
const setType = (type: string = '') => {
    showType.value = type
}
</script>